<template>
  <section class='f-income-list'>
    <van-search v-model="searchForm.recordName" background="#3273F4" placeholder="输入佣金政策名称查询" @search="onLoad" @blur="onLoad" />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :style="{ height: currentHeight }" style="overflow-y: auto;">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <section class="f-cell-ground" v-for="(item,index) in tableData" :key="index">
          <div class="f-flex-between f-cell-title">
            <p>{{item.recordName || '--'}}</p>
            <p>{{ getDateTime(item.createTime)[6] }}</p>
          </div>
          <div class="f-cell f-pb-10">
            <section class="g-flex-ct">
              <img class="f-img2" src="@/assets/imgs/jhh_icon_brokerage_policy.png" alt="">
              <div class="f-cell-text">
                <p>
                  <span>佣金金额：</span>
                  <span>{{item.income || '--'}}元</span>
                </p>
                <p>
                  <span>关联商品：</span>
                  <template v-if="item.bindGoodsType == 2">
                    <span v-for="(myItem,myIndex) in item.goodsList" :key="myIndex">
                      <span>{{myItem.goodsName  || '--'}}</span>
                      <span v-if="myIndex + 1 < item.goodsList.length">,</span>
                    </span>
                  </template>
                  <template v-else>
                    <span>全部商品</span>
                  </template>
                </p>
                <p>
                  <span>佣金描述：</span>
                  <span>{{item.descInfo ||'--'}}</span>
                </p>
              </div>
            </section>
          </div>
          <p class="f-divider" v-if="index+1 < tableData.length"></p>
        </section>
      </van-list>
    </van-pull-refresh>

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { getStore, getDateTime } from '@/utils/utils';
import api from '../api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      searchForm: {
        "endTime": "",
        "goodsId": '',
        "orderBy": "",
        "page": 1,
        "recordName": "",
        "shopId": getStore('USER_INFO').companyId,
        "size": 10,
        "startTime": ""
      },

      loading: false,
      finished: false,
      refreshing: false,
      tableData: [],
      total: 0,

      currentHeight: '500px',
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '佣金政策',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
      });

      state.currentHeight = window.innerHeight - 144 + 'px'
    })

    const onLoad = () => {
      let json = JSON.parse(JSON.stringify(state.searchForm))

      if (state.refreshing) {
        state.tableData = [];
        state.refreshing = false;
      }

      api.incomeList(json).then(res => {
        state.refreshing = false

        if (res.data.list.length) state.searchForm.page += 1
        state.tableData.push(...res.data.list)

        // 防止触发两次
        if (state.tableData.length >= res.data.total) {
          state.finished = true;
        } else {
          state.finished = false;
        }

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.tableData.length < 10) {
          state.finished = true;
        }
      }).catch(err => {
        state.loading = false;
        state.finished = true;
        state.refreshing = false
      })
    };

    const onRefresh = () => {
      state.searchForm.page = 1

      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    return {
      ...toRefs(state),
      getDateTime,
      onLoad,
      onRefresh,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-income-list {
  .f-cell-ground {
    width: 375px;
    background: #ffffff;
    padding-left: 19px;
    .f-cell-title {
      font-size: 10px;
      color: #666666;
      padding: 10px 0;
      padding-right: 14px;
      p:first-child {
        font-size: 14px;
        color: #000000;
      }
    }
    .f-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 14px;
      font-size: 12px;
      .f-cell-text {
        font-size: 10px;
        color: #666666;
        p {
          margin: 5px 0;
        }
        p > span:first-child {
          display: inline-block;
          width: 60px;
          text-align: right;
        }
        p > span:last-child {
          color: #000000;
        }
      }
    }
    .f-divider {
      width: 100%;
      height: 1px;
      background: #aaaaaa;
    }
  }
  .f-img2 {
    width: 40px;
    height: 40px;
    margin-right: 13px;
  }
}
</style>